<template>
  <div>
    <a-tabs v-model="activeKey" @change="changTab">
      <a-tab-pane key="2" :tab="tabName2">
        <div>
          <a-row :gutter="20">
            <a-col :span="6">
              <div class="flex_a">
                <div class="item-title">操作时间：</div>
                <a-range-picker
                  v-model="dateInfo2"
                  valueFormat="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  @change="e => this.orderDateChange(e, '2')"
                  allowClear
                ></a-range-picker>
              </div>
            </a-col>
            <a-col :span="4">
              <div class="flex_ev">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button type="primary" @click="handleResetSearch">重置</a-button>
              </div>
            </a-col>
          </a-row>
          <fmsx-table
            ref="table"
            size="middle"
            bordered
            rowKey="rowIndex"
            class="j-table-force-nowrap"
            :scroll="{ x: true }"
            :columns="columns2"
            :dataSource="dataSource2"
            :pagination="ipagination2"
            :loading="loading"
            @change="handleTableChange"
          >
            <template slot="entryOrderNum" slot-scope="text, record">
              <a v-if="text" @click="handleViewDetail(record, 'entry')">{{ record.entryOrderNum }}</a>
              <div v-else></div>
            </template>
          </fmsx-table>
        </div>
      </a-tab-pane>

      <a-tab-pane key="3" :tab="tabName3">
        <div>
          <a-row :gutter="20">
            <a-col :span="6">
              <div class="flex_a">
                <div class="item-title">操作时间：</div>
                <a-range-picker
                  v-model="dateInfo3"
                  allowClear
                  valueFormat="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  @change="e => this.orderDateChange(e, '3')"
                ></a-range-picker>
              </div>
            </a-col>
            <a-col :span="4">
              <div class="flex_ev">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button type="primary" @click="handleResetSearch">重置</a-button>
              </div>
            </a-col>
          </a-row>
          <fmsx-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            class="j-table-force-nowrap"
            :scroll="{ x: true }"
            :columns="columns3"
            :dataSource="dataSource3"
            :pagination="ipagination3"
            :loading="loading"
            @change="handleTableChange"
          >
            <template slot="outOrderNum" slot-scope="text, record">
              <a v-if="text" @click="handleViewDetail(record, 'out')">{{ record.outOrderNum }}</a>
              <div v-else></div>
            </template>
          </fmsx-table>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import wipApi from '@/api/fmsx/wip'
import moment from 'moment'

export default {
  desc: '资产列表弹窗',
  props: {
    defaultTabKey: {
      type: String,
      default: '1'
    },
    materialId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      moment,
      activeKey: '2',
      loading: false,
      columns2: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '工单号',
          align: 'center',
          dataIndex: 'moNum'
        },
        {
          title: '客户代码',
          align: 'center',
          dataIndex: 'custCode'
        },
        {
          title: '图号',
          align: 'center',
          dataIndex: 'dwgNo',
          customRender: (text, row, index) => {
            if (text && text.length > 0) {
              //let url = window._CONFIG['domianURL'] + '/base/annex/file/download/' + userpath
              let url = '/#/mes/other/pdf?drawNum=' + row.dwgNo + '&drawRev=' + row.rev
              return (
                <a href={url} target='_blank'>
                  {text}
                </a>
              )
            }
          }
        },
        {
          title: '版本',
          align: 'center',
          dataIndex: 'rev'
        },
        {
          title: '工序号',
          align: 'center',
          dataIndex: 'operationNum'
        },
        {
          title: '工序编码',
          align: 'center',
          dataIndex: 'processId'
        },
        {
          title: '生产数量',
          align: 'center',
          dataIndex: 'productionQuantity'
        },
        {
          title: '入库数量',
          align: 'center',
          dataIndex: 'quantity'
        },
        {
          title: '仓库',
          align: 'center',
          dataIndex: 'wmsId_dictText'
        },
        {
          title: '货架',
          align: 'center',
          dataIndex: 'shelvesId_dictText'
        },
        {
          title: '储位',
          align: 'center',
          dataIndex: 'storageId_dictText'
        },
        {
          title: '申请人',
          align: 'center',
          dataIndex: 'recordBy'
        },
        {
          title: '申请时间',
          align: 'center',
          dataIndex: 'recordTime'
        },

        {
          title: '操作人',
          align: 'center',
          width: 80,
          dataIndex: 'updateBy'
        },
        {
          title: '操作时间',
          align: 'center',
          width: 150,
          dataIndex: 'updateTime'
        }
      ],
      columns3: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '工单号',
          align: 'center',
          dataIndex: 'moNum'
        },
        {
          title: '客户代码',
          align: 'center',
          dataIndex: 'custCode'
        },
        {
          title: '图号',
          align: 'center',
          dataIndex: 'dwgNo',
          customRender: (text, row, index) => {
            if (text && text.length > 0) {
              let url = '/#/mes/other/pdf?drawNum=' + row.dwgNo + '&drawRev=' + row.rev
              return (
                <a href={url} target='_blank'>
                  {text}
                </a>
              )
            }
          }
        },
        {
          title: '版本',
          align: 'center',
          dataIndex: 'rev'
        },
        {
          title: '工序号',
          align: 'center',
          dataIndex: 'operationNum'
        },
        {
          title: '工序编码',
          align: 'center',
          dataIndex: 'processId'
        },
        {
          title: '生产数量',
          align: 'center',
          dataIndex: 'productionQuantity'
        },
        {
          title: '出库数量',
          align: 'center',
          dataIndex: 'quantity'
        },
        {
          title: '仓库',
          align: 'center',
          dataIndex: 'wmsId_dictText'
        },
        {
          title: '货架',
          align: 'center',
          dataIndex: 'shelvesId_dictText'
        },
        {
          title: '储位',
          align: 'center',
          dataIndex: 'storageId_dictText'
        },
        {
          title: '申请人',
          align: 'center',
          dataIndex: 'recordBy'
        },
        {
          title: '申请时间',
          align: 'center',
          dataIndex: 'recordTime'
        },
        {
          title: '操作人',
          align: 'center',
          width: 80,
          dataIndex: 'updateBy'
        },
        {
          title: '操作时间',
          align: 'center',
          width: 150,
          dataIndex: 'updateTime'
        }
      ],
      dataSource2: [],
      dataSource3: [],
      ipagination2: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['20', '50', '100', '200', '500'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      ipagination3: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['20', '50', '100', '200', '500'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter: {
        column: 'updateTime',
        order: 'desc'
      },
      tabName2: '入库明细',
      tabName3: '出库明细',
      dateInfo2: [],
      dateInfo3: [],
      dateInfo4: [],
      queryParam2: {},
      queryParam3: {},
      isShowInbound: false,
      isShowOutbound: false
    }
  },
  created () {
    this.activeKey = this.defaultTabKey == '0' ? '1' : this.defaultTabKey
    this.handleSearch()
  },
  methods: {
    changTab (tabKey) {
      this.handleSearch()
    },

    handleTableChange (pagination, filters, sorter) {
      if (this.activeKey == '1') {
        this.ipagination1 = pagination
      } else if (this.activeKey == '2') {
        this.ipagination2 = pagination
      } else if (this.activeKey == '3') {
        this.ipagination3 = pagination
      } else if (this.activeKey == '4') {
        this.ipagination4 = pagination
      } else {
        this.ipagination5 = pagination
      }
      this.handleSearch()
    },

    handleSearch () {
      this.queryParam2['assetsId'] = this.materialId
      this.queryParam3['assetsId'] = this.materialId
      let params = {}

      this.loading = true
      if (this.activeKey == 2) {
        params = {
          ...this.queryParam2,
          type: '1',
          pageNo: this.ipagination2.current,
          pageSize: this.ipagination2.pageSize,
          ...this.isorter
        }
        wipApi.AssetList.list(params)
          .then(res => {
            this.dataSource2 = res.records
            this.ipagination2.total = res.total
          })
          .finally(() => {
            this.loading = false
          })
      } else if (this.activeKey == 3) {
        params = {
          ...this.queryParam3,
          type: '2',
          pageNo: this.ipagination3.current,
          pageSize: this.ipagination3.pageSize,
          ...this.isorter
        }
        wipApi.AssetList.list(params)
          .then(res => {
            this.dataSource3 = res.records
            this.ipagination3.total = res.total
          })
          .finally(() => {
            this.loading = false
          })
      }
    },

    handleResetSearch () {
      this.dateInfo2 = []
      this.dateInfo3 = []
      this.dateInfo4 = []
      this.queryParam2 = { materialId: this.materialId }
      this.queryParam3 = { materialId: this.materialId }
      this.handleSearch()
    },

    handleViewDetail (record, orderType) {
      if (orderType == 'entry') {
        this.isShowInbound = true
        this.$nextTick(() => {
          this.$refs.inRef.handleDetail({ ...record }, false)
        })
      } else {
        this.isShowOutbound = true
        this.$nextTick(() => {
          this.$refs.outRef.handleDetail({ ...record, id: record.outOrderId }, false)
        })
      }
    },

    orderDateChange (e, tab) {
      if (tab == 2) {
        if (e) {
          this.queryParam2.startTime = e[0]
          this.queryParam2.endTime = e[1]
        } else {
          delete this.queryParam2['startTime']
          delete this.queryParam2['endTime']
        }
      } else if (tab == 3) {
        if (e) {
          this.queryParam3.startTime = e[0]
          this.queryParam3.endTime = e[1]
        } else {
          delete this.queryParam3['startTime']
          delete this.queryParam3['endTime']
        }
      } else if (tab == 4) {
        if (e) {
          this.queryParam4.startTime = e[0]
          this.queryParam4.endTime = e[1]
        } else {
          delete this.queryParam4['startTime']
          delete this.queryParam4['endTime']
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.item-title {
  width: 120px;
}
</style>
